<template>
	<view class="wp">
		<view class="nav-balance">
			账户剩余金额：<text>{{remMoney}}元</text>
		</view>
		<view class="money">
			￥<input type="number" v-model="extMoney" placeholder="输入提现金额" placeholder-class="money-inp"/>
		</view>
		<view class="pro">
			提现金额不小于1.00元
		</view>
		<view class="way">
			<view class="way-tit">提现方式</view>
			<view class="way-con" >
				<image :src="src"></image>微信
			</view>
		</view>
		<view class="inp">
			姓名<text>*</text><input type="text" v-model="name" placeholder="请输入正确的姓名" placeholder-class="inp-pla" />
		</view>
		<view class="inp">
			微信号<text>*</text><input type="text" v-model="wx" placeholder="请输入您的的微信号" placeholder-class="inp-pla" />
		</view>
		<button class="btn" @click="submit">提交申请</button>
		
		
		<uni-popup ref="popup" type="center">
		    <uni-popup-message type="error" message="姓名与密码不能为空" :duration="2000"></uni-popup-message>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue';
	import url from '../../components/hosturl.js';
	export default {
		data() {
			return {
				remMoney:'128.8',
				extMoney:'',
				src:'/static/emptyCart.jpg',
				wayCon:'way-con',
				name:'',
				wx:''
			}
		},
		components: {uniPopup,uniPopupMessage},
		methods: {
			submit(){
				if(this.extMoney==''){
					uni.showToast({
					    title: '请输入提现金额',
					    duration: 2000,
						icon:'none'
					});
				}else if(this.extMoney-0>this.remMoney-0){
					uni.showToast({
					    title: '余额不足',
					    duration: 2000,
						icon:'none'
					});
				}
				else{
				if(this.name.length>0&&this.wx.length>0){
					uni.showToast({
					    duration: 2000
					});
				}else{
					this.$refs.popup.open()
				}
				}
			}
		},
		onLoad() {
			uni.setNavigationBarTitle({
				title:'申请提现'
			});
			uni.setNavigationBarColor({
			    frontColor: '#ffffff',
			    backgroundColor: '#a286eb'
			});
			var _this=this;
			uni.request({
				url:url+'/Me/getEssentialMsg',
				method:'GET',
				data:{
					'token':uni.getStorageSync('token'),
				},
				success(res) {
					 _this.remMoney=res.data.msg.price;
				}
			})
		}
	}
</script>

<style>
.wp{ background: #f8f8f8;color: #303133;font-size: 32rpx; }
.nav-balance{ border-top: 1px solid #E4E7ED;border-bottom: 1px solid #E4E7ED;background-color: #fff;line-height: 60rpx;padding: 20rpx 30rpx; }
.money{ background-color: #fff;color: #a387eb; }
.money{ align-items: center;display: flex;line-height: 90rpx;justify-content: start;padding: 30rpx 20rpx; }
.money input{ color: #303133;font-size: 32rpx;padding-left: 30rpx; }
.money-inp{ color: #909399;font-size: 28rpx; }
.pro{ font-size:28rpx;padding: 30rpx 20rpx; }
.way{ background-color: #fff;padding: 20rpx;display: flex;flex-wrap: wrap;font-size: 32rpx; }
.way-tit{ width: 100%; }
.way-con{ border: 1px #a387eb solid;border-radius: 20rpx;color: #555555;line-height: 60rpx;margin: 20rpx;padding: 20rpx 50rpx 20rpx 30rpx;text-align: center; }
.way-con image{ height: 50rpx;width: 60rpx;margin-right: 20rpx; vertical-align: middle; }
.inp{ background-color: #fff;color: #555555;display: flex;justify-content: start;font-size: 28rpx;line-height: 60rpx;margin-top: 20rpx;padding: 30rpx 20rpx; }
.inp input{ height: 60rpx; font-size: 32rpx; margin-left: 30rpx;line-height: 60rpx; }
.inp-pla,.wx{ font-size: 28rpx; }
.inp text{ color: #a387eb; }
.btn{ background-color: #a387eb;color: #fff;font-size: 32rpx;height: 100rpx;line-height: 100rpx;width: 90%;margin-top: 100rpx; }
</style>
